<template>
	<view class="root">
		<carHeader :title="'立即预约'"></carHeader>
		<view class="all">
			<view>
					<view class="sousuo">
						<text>维修方式</text>
						<view class="danxuan">
							<u-radio-group
							   v-model="radiovalue1"
							   placement="row"
							   @change="groupChange"
							 >
							   <u-radio class="radio"
							     :customStyle="{marginBottom: '8px'}"
							     v-for="(item, index) in radiolist1"
							     :key="index"
							     :label="item.name"
							     :name="item.name"
							     @change="radioChange"
								 size="10px"
							   >
							   </u-radio>
							 </u-radio-group>
						</view>
					</view>
					
				</view>
			
			<view class="middle">
				<view class="one">
					<text>客户信息</text>
				</view>
				<view class="two">
					<view class="input-container1">
						<view class="input-title1">车主姓名</view>
						<view class="input">
							<u-input
								placeholder="请输入车主姓名"
								v-model="form.name"
								shape="circle"
							/>
						</view>
						
					</view>
					
					<view class="input-container2">
						<view class="input-title2">联系方式</view>
						<view class="input">
							<u-input
								placeholder="请输入联系方式"
								v-model="form.num"
								shape="circle"
							/>
						</view>
					</view>
					
					<view class="input-container3">
						<view class="input-title3">预约时间</view>
						<view class="input">
							<u-input
								placeholder="请输入预约时间"
								v-model="form.time"
								shape="circle"
							/>
						</view>
						
					</view>
					
					<view class="input-container4" v-show="flag">
						<view class="input-title4">取车位置</view>
						<view  class="input">
							<u-input
								placeholder="请输入取车位置"
								v-model="form.address"
								shape="circle"
							/>
						</view>
						
					</view>
					
				</view>
			</view>
			<view class="middle">
				<view class="one">
					<text>车辆信息</text>
				</view>
				<view class="two">
					<view class="input-container4">
						<view class="input-title4">车辆类型</view>
						<view class="select">
							<uni-data-select 
							        v-model="form.leixing"
							        :localdata="range"
							        @change="change"
							    ></uni-data-select>
						</view>
					</view>
					<view class="input-container4">
						<view class="input-title4">车牌号</view>
						<view class="input">
							<u-input
								placeholder="请输入车牌号"
								v-model="form.chepai"
								shape="circle"
							/>
						</view>
					</view>
					
				</view>
			</view>
			<view class="middle" style="height: 600rpx">
				<view class="one">
					<text>照片</text>
				</view>
				<view class="two">
					<view class="input-container4">
						<view class="input-title4" style="width: 200rpx;background-color: white;color: black;text-align: left;">整车照片</view>
						<view class="select">
							<uni-file-picker 
							limit="2" 
							title="最多选择2张图片">
							</uni-file-picker>
						</view>
					</view>
					<view class="input-container4">
						<view class="input-title4" style="width: 200rpx;background-color: white;color: black; text-align: left;">维修部位照片</view>
						<view class="input">
							<uni-file-picker
							limit="2" 
							title="最多选择2张图片"
							:value="FileList"
							>
							</uni-file-picker>
						</view>
					</view>
					
				</view>
			</view>
			<view class="bottom">
				<view class="submit">
					<button style="background-color: #0662E6;">提交</button>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:false,
				form:{
					name:"",
					num:"",
					time:"",
					address:"",
					leixing:"",
					chepai:"",
				},
				value: '',
				value1:0,
				radiovalue1: '到店维修',
				radiolist1: [{
				name: '到店维修',
				disabled: false
			},
			{
				name: '上门取车',
				disabled: false
			}],
			range: [
			          { value: 0, text: "篮球" },
			          { value: 1, text: "足球" },
			          { value: 2, text: "游泳" },
			        ],
			FileList:[],
			}
		},
		methods: {
			groupChange(n) {
			    console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				if(n=="到店维修"){
					this.flag = false;
				}else{
					this.flag = true;
				}
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
			        console.log("e:", e);
			      },
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	.slot{
		padding-top: 40rpx;
	}
	.all{
		// background-color: #4FA2FF;
		margin-top: -300rpx;
	}
	.sousuo{
		padding-left: 5%;
		margin-right: 5%;
		width: 85%;
		height: 100rpx;
		background-color: white;
		// position: absolute;
		margin-left: 5%;
		margin-top: 100rpx;
		border-radius: 10rpx;
		line-height: 100rpx;
		//
		display:flex;
		align-items: center;
		justify-content: space-between;
		u-radio-group{
			margin-left: 20rpx;
		}
		.radio{
			margin-left: 20rpx;
		}

	}
	.danxuan{
		// width: 400rpx;
		height: 30rpx;
		line-height: 100rpx;
		margin-right: 5%;
		justify-content: center;
		u-radio{
			margin-left: 20rpx;
		}
	}
	.middle{
		background-color: white;
		// height: 600rpx;
		width: 90%;
		margin-left: 5%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
		.one{

			height: 100rpx;
			border-bottom: 2px solid rgba(0, 0, 0, 0.1);
			line-height: 100rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-size: 35rpx;
			// float: left;
		}
	}
	
	.input-container1,.input-container2,.input-container3,.input-container4{
		height: 80rpx;
		// display: flex;
		line-height: 80rpx;
		margin-top: 20rpx;
		
	}
	
	.input-title4,.input-title3,.input-title2,.input-title1{
		width: 180rpx;
		background-color: #4FA2FF;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 30rpx;
		float: left;
	}
	.input{
		float: left;
		width: 420rpx;
	}
	.select{
		// height: 20rpx;
		width: 420rpx;
		// padding: 20rpx;
		border-radius: 50rpx;
		float: left;
        // border: 2px solid #8AC007;
		uni-data-select{
			border: 0;
		}
	}
	.submit{
		margin-top: 50rpx;
		button{
			width: 50%;
			color: white;
			border-radius: 50rpx;
		}
	}
</style>
